<!-- 持仓订单列表 -->
<template>
    <div class="pageListBox">
        <div class="cardAdmin">
            <div class="formNewAdmin" v-if="formshow">
                <div class="formSearch">
                    <span class="namename">用户名</span>
                    <el-input size="mini" style="flex: 3" v-model="form.username"></el-input>
                </div>

                <div class="formSearch">
                    <span class="namename">用户ID</span>
                    <el-input size="mini" style="flex: 3" v-model="form.user_id"></el-input>
                </div>

                <div class="formSearch">
                    <span class="namename">订单号</span>
                    <el-input size="mini" style="flex: 3" v-model="form.order_number"></el-input>
                </div>




                <div class="formSearch">
                    <span class="namename">产品代码</span>
                    <el-input size="mini" style="flex: 3" v-model="form.symbol"></el-input>
                </div>



                <div class="formSearch">
                    <span class="namename">是否加锁</span>
                    <el-select size="mini" style="flex: 3" v-model="form.is_locked" placeholder="请选择">
                        <el-option label="全部" :value="2"></el-option>
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </div>


                <div class="formSearch">
                    <span class="namename">买入时间段</span>
                    <el-select size="mini" style="flex: 3" v-model="form.buy_time_period" placeholder="请选择">
                        <el-option label="全部" :value="2"></el-option>
                        <el-option label="盘中 (intraday)" value="intraday"></el-option>
                        <el-option label="盘后 (postmarket)" value="postmarket"></el-option>
                    </el-select>
                </div>

                <div class="formSearch">
                    <span class="namename">买入方向</span>
                    <el-select size="mini" style="flex: 3" v-model="form.buy_direction" placeholder="请选择">
                        <el-option label="全部" :value="2"></el-option>
                        <el-option label="做多 (long)" value="long"></el-option>
                        <el-option label="做空 (short)" value="short"></el-option>
                    </el-select>
                </div>

                <div class="formSearch">
                    <span class="namename">订单状态</span>
                    <el-select size="mini" style="flex: 3" v-model="form.order_status" placeholder="请选择">
                        <el-option label="全部" :value="2"></el-option>
                        <el-option label="持仓中 (holding)" value="holding"></el-option>
                        <el-option label="已平仓 (closed)" value="closed"></el-option>
                        <el-option label="平仓中 (closing)" value="closing"></el-option>
                        <el-option label="待成交 (pending)" value="pending"></el-option>
                        <el-option label="已取消 (canceled)" value="canceled"></el-option>
                    </el-select>
                </div>


                <div class="formSearch">
                    <span class="namename">买入时间开始</span>
                    <el-date-picker size="mini" style="flex: 3" v-model="form.buy_time_start" type="datetime"
                        placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </div>

                <div class="formSearch">
                    <span class="namename">买入时间结束</span>
                    <el-date-picker size="mini" style="flex: 3" v-model="form.buy_time_end" type="datetime"
                        placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </div>


                <div class="souSuoYouCe">
                    <el-button icon="el-icon-refresh" size="mini" class="white-button" @click="resetForm()">重置</el-button>
                    <el-button class="black-button" icon="el-icon-search" size="mini"
                        @click="get_data('btn')">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="btnBoxList">
            <div class="btns">
                <el-button class="green-button" size="mini" icon="el-icon-plus" plain @click="addbtn()">Add</el-button>
                <el-button class="black-button" size="mini" icon="el-icon-refresh" plain
                    @click="get_data()">刷新表格</el-button>
            </div>
            <div class="formbtns">
                <div style="max-width: 200px;height: 100%;;background-color: #f4f4f4;display: flex;">
                    <div class="qweqweasdasd">
                        <el-dropdown trigger="click" placement="bottom">

                            <div class="btnList22">
                                <i class="el-icon-s-grid"></i>
                                <i style="font-size: 14px;" class="el-icon-caret-bottom"></i>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="col in allColumns" :key="col.prop">
                                    <el-checkbox v-model="selectedColumns" :label="col.prop">
                                        {{ col.label }}
                                    </el-checkbox>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="poipoi1">
                        <el-dropdown @command="exportTable" class="popo1cli" trigger="click" placement="bottom">
                            <span class="el-dropdown-link">
                                <i style="font-size: 18px;" class="el-icon-download"></i>
                                <i style="font-size: 14px;" class="el-icon-caret-bottom"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="json">JSON</el-dropdown-item>
                                <el-dropdown-item command="xml">XML</el-dropdown-item>
                                <el-dropdown-item command="csv">CSV</el-dropdown-item>
                                <el-dropdown-item command="txt">TXT</el-dropdown-item>
                                <el-dropdown-item command="word">Word</el-dropdown-item>
                                <el-dropdown-item command="excel">Excel</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="poipoi2">
                        <i style="font-size: 18px;cursor: pointer;" class=" el-icon-search" @click="showform"></i>

                    </div>
                </div>
            </div>
        </div>
        <!-- 表格 -->
        <el-table v-table-resize border highlight-current-row :data="tableData" height="600px" cell-class-name="rowlist"
            class="x1919" ref="tableRef" size="mini" v-loading="table_loading">

            <el-table-column prop="id" fixed="left" label="id" width="auto" align="center" min-width="80px">
            </el-table-column>

            <el-table-column type="expand" label="其他参数" width="80px">
                <template slot-scope="scope">
                    <el-descriptions size="mini" border title="其他参数" :column="1"
                        style="padding-left: 30px;max-width: 1000px;">
                        <el-descriptions-item label="市值">{{ scope.row.market_value }}</el-descriptions-item>
                        <el-descriptions-item label="平仓价">{{ scope.row.closing_price }}</el-descriptions-item>
                        <el-descriptions-item label="买入时间">{{ scope.row.buy_time }}</el-descriptions-item>
                        <el-descriptions-item label="卖出时间">{{ scope.row.sell_time }}</el-descriptions-item>
                        <el-descriptions-item label="订单编号">{{ scope.row.order_number }}</el-descriptions-item>
                        <el-descriptions-item label="买入方向">{{ scope.row.buy_direction }}</el-descriptions-item>
                        <el-descriptions-item label="买入类型">{{ scope.row.buy_type }}</el-descriptions-item>
                        <el-descriptions-item label="卖出类型">{{ scope.row.sell_type }}</el-descriptions-item>
                        <el-descriptions-item label="杠杆倍数">{{ scope.row.leverage }}</el-descriptions-item>
                        <el-descriptions-item label="止损价">{{ scope.row.stop_loss_price }}</el-descriptions-item>
                        <el-descriptions-item label="目标盈利价">{{ scope.row.target_profit_price }}</el-descriptions-item>
                        <el-descriptions-item label="锁仓期（天）">{{ scope.row.lock_up_period_days }}</el-descriptions-item>
                        <el-descriptions-item label="买入时间周期">{{ scope.row.buy_time_period }}</el-descriptions-item>
                        <el-descriptions-item label="手续费">{{ scope.row.fee }}</el-descriptions-item>
                        <el-descriptions-item label="股票ID">{{ scope.row.stock_id }}</el-descriptions-item>
                        <el-descriptions-item label="用户ID">{{ scope.row.user_id }}</el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="auto" align="center" min-width="120px">
            </el-table-column>
            <el-table-column prop="order_status" label="订单状态" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="stock_name" label="股票名称" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="symbol" label="股票代码" width="auto" align="center" min-width="100px">
            </el-table-column>

            <el-table-column prop="buy_price" label="买入价格" width="auto" align="center" min-width="150px">
            </el-table-column>
            <el-table-column prop="buy_quantity" label="买入数量" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="sell_amount" label="卖出金额" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="transaction_principal" label="交易本金" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="holding_profit_loss" label="持仓盈亏" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="is_locked" label="是否锁仓" width="auto" align="center" min-width="100px">
            </el-table-column>
            <el-table-column prop="holding_type" label="持仓类型" width="auto" align="center" min-width="100px">
            </el-table-column>



            <el-table-column label="操作" width="150" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button @click="tableEditing(scope.row)" class="green-button" icon="el-icon-edit" type="info" plain
                        size="mini"></el-button>
                    <el-button @click="del_data(scope.row.id)" class="red-button" type="info" plain size="mini"
                        v-if="scope.row.name !== 'admin'" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="fenye11">
            <div style="display: flex;align-items: center;">{{ `当前第 ${currentPage} 页，每页 ${pagesize} 条记录` }}</div>
            <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
                @current-change="current_change"></el-pagination>
        </div>
        <!-- 弹窗 -->
        <el-dialog v-dialog-drag :close-on-click-modal="false" title="新增" top="35px" :visible.sync="dialogVisibleAdd"
            :before-close="beforeClose">
            <el-form :model="formAdd" :rules="rulesAdd" ref="formAdd" class="demo-formAdd">
                <el-form-item label="用户ID" prop="user_id">
                    <el-input size="mini" type="number" v-model="formAdd.user_id"></el-input>
                </el-form-item>
                <el-form-item label="股票代码" prop="symbol">
                    <el-input size="mini" v-model="formAdd.symbol"></el-input>
                </el-form-item>
                <el-form-item label="买入价格" prop="buy_price">
                    <el-input size="mini" v-model="formAdd.buy_price"></el-input>
                </el-form-item>
                <el-form-item label="买入数量" prop="buy_quantity">
                    <el-input size="mini" v-model="formAdd.buy_quantity"></el-input>
                </el-form-item>
                <el-form-item label="买入时间">
                    <el-date-picker class="diaformart" maxlength="200" size="mini" show-word-limit
                        v-model="formAdd.buy_time" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="'23:59:59'" />
                </el-form-item>
                <el-form-item label="卖出时间">
                    <el-date-picker class="diaformart" maxlength="200" size="mini" show-word-limit
                        v-model="formAdd.sell_time" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"
                        :default-time="'23:59:59'" />
                </el-form-item>
                <el-form-item label="买入周期">
                    <el-select size="mini" v-model="formAdd.buy_time_period" placeholder="买入周期">
                        <el-option label="盘中" value="intraday" />
                        <el-option label="盘后" value="postmarket" />
                    </el-select>
                </el-form-item>

                <el-form-item label="买入方向">
                    <el-select size="mini" v-model="formAdd.buy_direction" placeholder="买入方向">
                        <el-option label="买涨" value="long" />
                        <el-option label="买跌" value="short" />
                    </el-select>
                </el-form-item>
                <el-form-item label="买入类型">
                    <el-select size="mini" v-model="formAdd.buy_type" placeholder="买入类型">
                        <el-option label="市价" value="market" />
                        <el-option label="限价" value="limit" />
                    </el-select>
                </el-form-item>


                <el-form-item label="平仓价格">
                    <el-input size="mini" v-model="formAdd.closing_price"></el-input>
                </el-form-item>
                <el-form-item label="手续费">
                    <el-input size="mini" v-model="formAdd.fee"></el-input>
                </el-form-item>
                <el-form-item label="持仓盈亏">
                    <el-input size="mini" v-model="formAdd.holding_profit_loss"></el-input>
                </el-form-item>
                <el-form-item label="持仓类型">
                    <el-input size="mini" v-model="formAdd.holding_type"></el-input>
                </el-form-item>
                <el-form-item label="是否锁仓">
                    <el-input size="mini" v-model="formAdd.is_locked"></el-input>
                </el-form-item>
                <el-form-item label="杠杆倍数">
                    <el-input size="mini" v-model="formAdd.leverage"></el-input>
                </el-form-item>
                <el-form-item label="锁仓期（天）">
                    <el-input size="mini" v-model="formAdd.lock_up_period_days"></el-input>
                </el-form-item>
                <el-form-item label="市值">
                    <el-input size="mini" v-model="formAdd.market_value"></el-input>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input size="mini" v-model="formAdd.order_number" placeholder="如果为空则自动生成"></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-input size="mini" v-model="formAdd.order_status"></el-input>
                </el-form-item>
                <el-form-item label="卖出金额">
                    <el-input size="mini" v-model="formAdd.sell_amount"></el-input>
                </el-form-item>

                <el-form-item label="卖出类型">
                    <el-input size="mini" v-model="formAdd.sell_type"></el-input>
                </el-form-item>
                <el-form-item label="股票ID">
                    <el-input size="mini" v-model="formAdd.stock_id" placeholder="如果为空则根据 symbol 查询填充"></el-input>
                </el-form-item>


                <el-form-item label="股票名称">
                    <el-input size="mini" v-model="formAdd.stock_name" placeholder="如果为空则使用股票表中的名称"></el-input>
                </el-form-item>
                <el-form-item label="止损价">
                    <el-input size="mini" v-model="formAdd.stop_loss_price"></el-input>
                </el-form-item>

                <el-form-item label="目标盈利价">
                    <el-input size="mini" v-model="formAdd.target_profit_price"></el-input>
                </el-form-item>
                <el-form-item label="交易本金">
                    <el-input size="mini" v-model="formAdd.transaction_principal"></el-input>
                </el-form-item>


            </el-form>
            <template slot="footer">
                <div class="fbtns">
                    <el-button class="purple-button" size="mini" @click="add_data" :loading="btnAdd" plain>确认新增</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-dialog-drag :close-on-click-modal="false" top="35px" title="更新" :visible.sync="dialogVisibleEdit"
            v-loading="dialogVisibleEditLoading" :before-close="beforeClose">
            <el-form :model="formEdit" :rules="rulesEdit" ref="formEdit" class="demo-formEdit">

                <el-form-item label="买入方向">
                    <el-input size="mini" v-model="formEdit.buy_direction"></el-input>
                </el-form-item>
                <el-form-item label="买入价格">
                    <el-input size="mini" v-model="formEdit.buy_price"></el-input>
                </el-form-item>
                <el-form-item label="买入数量">
                    <el-input size="mini" v-model="formEdit.buy_quantity"></el-input>
                </el-form-item>
                <el-form-item label="买入时间">
                    <el-input size="mini" v-model="formEdit.buy_time"></el-input>
                </el-form-item>
                <el-form-item label="买入周期">
                    <el-input size="mini" v-model="formEdit.buy_time_period"></el-input>
                </el-form-item>
                <el-form-item label="买入类型">
                    <el-input size="mini" v-model="formEdit.buy_type"></el-input>
                </el-form-item>
                <el-form-item label="平仓价">
                    <el-input size="mini" v-model="formEdit.closing_price"></el-input>
                </el-form-item>
                <el-form-item label="手续费">
                    <el-input size="mini" v-model="formEdit.fee"></el-input>
                </el-form-item>
                <el-form-item label="持仓盈亏">
                    <el-input size="mini" v-model="formEdit.holding_profit_loss"></el-input>
                </el-form-item>
                <el-form-item label="持仓类型">
                    <el-input size="mini" v-model="formEdit.holding_type"></el-input>
                </el-form-item>
                <el-form-item label="是否锁仓">
                    <el-input size="mini" v-model="formEdit.is_locked"></el-input>
                </el-form-item>
                <el-form-item label="杠杆倍数">
                    <el-input size="mini" v-model="formEdit.leverage"></el-input>
                </el-form-item>
                <el-form-item label="锁仓期（天）">
                    <el-input size="mini" v-model="formEdit.lock_up_period_days"></el-input>
                </el-form-item>
                <el-form-item label="市值">
                    <el-input size="mini" v-model="formEdit.market_value"></el-input>
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input size="mini" v-model="formEdit.order_number"></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-input size="mini" v-model="formEdit.order_status"></el-input>
                </el-form-item>
                <el-form-item label="卖出金额">
                    <el-input size="mini" v-model="formEdit.sell_amount"></el-input>
                </el-form-item>
                <el-form-item label="卖出时间">
                    <el-input size="mini" v-model="formEdit.sell_time"></el-input>
                </el-form-item>
                <el-form-item label="卖出类型">
                    <el-input size="mini" v-model="formEdit.sell_type"></el-input>
                </el-form-item>
                <el-form-item label="股票ID">
                    <el-input size="mini" v-model="formEdit.stock_id"></el-input>
                </el-form-item>
                <el-form-item label="股票名称">
                    <el-input size="mini" v-model="formEdit.stock_name"></el-input>
                </el-form-item>
                <el-form-item label="止损价">
                    <el-input size="mini" v-model="formEdit.stop_loss_price"></el-input>
                </el-form-item>
                <el-form-item label="股票代码">
                    <el-input size="mini" v-model="formEdit.symbol"></el-input>
                </el-form-item>
                <el-form-item label="目标盈利价">
                    <el-input size="mini" v-model="formEdit.target_profit_price"></el-input>
                </el-form-item>
                <el-form-item label="交易本金">
                    <el-input size="mini" v-model="formEdit.transaction_principal"></el-input>
                </el-form-item>
                <el-form-item label="用户ID">
                    <el-input size="mini" v-model="formEdit.user_id"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input size="mini" v-model="formEdit.username"></el-input>
                </el-form-item>


            </el-form>
            <template slot="footer">
                <div class="fbtns">
                    <el-button class="black-button" size="mini" plain @click="upd_data" :loading="btnEdit">确认修改</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
  
<script>
import {
    position_order_list,
    newly_added_position_orders,
    position_order_editing,
    position_order_deletion,
} from "@/utils/api";
export default {
    name: "positions",

    data() {
        return {
            table_loading: true,
            touristsspeak: [
                {
                    value: 1,
                    label: "是",
                },
                {
                    value: 0,
                    label: "否",
                },
            ],
            dialogVisibleEditLoading: false,
            dialogVisibleEdit: false,
            btnAdd: false,
            btnEdit: false,
            formshow: false,
            exportFormat: '',
            // 下拉框选中的列（存储 prop 值）
            selectedColumns: ['name'], // 默认选中姓名和日期

            // 所有可选的列配置
            allColumns: [
                { prop: 'discount', label: '折扣信息', width: '140px' },
                { prop: 'eps', label: '每股收益', width: '140px' },
                { prop: 'exchange', label: '交易所', width: '140px' },
                { prop: 'pe_ratio', label: '市盈率', width: '140px' },
                { prop: 'price_change_pct', label: '涨跌百分比', width: '140px' },
                { prop: 'numeric_symbol', label: '股票数字代码', width: '140px' },
                { prop: 'dividend_price', label: '股息价格', width: '140px' },
                { prop: 'turnover_section', label: '换手率区间', width: '140px' },
            ],
            pagesize: 10,
            total: 0,
            options: [
                {
                    value: 1,
                    label: "是",
                },
                {
                    value: 0,
                    label: "否",
                },
            ],
            defaultProps: {
                children: "childs",
                label: "name",
            },
            menuProps: {
                children: "children",
                label: "label",
            },
            formAdd: {
                buy_direction: 'long',
                buy_price: '0',
                buy_quantity: 0,
                buy_time: '',
                buy_time_period: 'intraday',
                buy_type: 'market',
                closing_price: '',
                fee: '0',
                holding_profit_loss: '0',
                holding_type: 'otc',
                is_locked: 0,
                leverage: 1,
                lock_up_period_days: '',
                market_value: '0',
                order_number: '',
                order_status: 'holding',
                sell_amount: '0',
                sell_time: '',
                sell_type: '',
                stock_id: '',
                stock_name: '',
                stop_loss_price: '',
                symbol: 'ABCTEST',
                target_profit_price: '',
                transaction_principal: '0',
                user_id: '',
                username: '',

            },
            formEdit: {
                id: '',
                buy_direction: 'long',
                buy_price: '0',
                buy_quantity: 0,
                buy_time: '',
                buy_time_period: 'intraday',
                buy_type: 'market',
                closing_price: '',
                fee: '0',
                holding_profit_loss: '0',
                holding_type: 'otc',
                is_locked: 0,
                leverage: 1,
                lock_up_period_days: '',
                market_value: '0',
                order_number: '',
                order_status: 'holding',
                sell_amount: '0',
                sell_time: '',
                sell_type: '',
                stock_id: '',
                stock_name: '',
                stop_loss_price: '',
                symbol: '',
                target_profit_price: '',
                transaction_principal: '0',
                user_id: '',
                username: '',
            },
            form: {
                username: "",
                user_id: "",
                order_number: "",
                buy_time_start: "",
                buy_time_end: "",
                is_locked: 2,
                symbol: "",
                buy_time_period: 2,
                buy_direction: 2,
                order_status: 2,
            },
            tableData: [
                { id: 1, date: '2023-01-01', group_name: '张三', status: '北京', permissions: '13800138000', name: 'name' },
                { id: 2, date: '2023-01-02', group_name: '李四', status: '上海', permissions: '13900139000', name: 'name' },
            ],
            dialogVisibleAdd: false,
            titles: "",
            name: "",
            nametype: "编辑",
            expandedKeys: [], // 控制哪些行默认展开
            menuData: [], //菜单列表
            userRoleList: [], //角色列表
            articlmenu: [], //文章列表
            draftsmenu: [], //草稿箱列表
            currentNodeData: [],
            currentDraftsKey: [],
            currentPage: 1,
            rulesEdit: {
                buy_direction: [
                    { required: true, message: "请输入买入方向", trigger: "blur" },
                ],
                buy_price: [
                    { required: true, message: "请输入买入价格", trigger: "blur" },
                ],
                buy_quantity: [
                    { required: true, message: "请输入买入数量", trigger: "blur" },
                ],
                buy_time: [
                    { required: true, message: "请输入买入时间", trigger: "blur" },
                ],
                buy_time_period: [
                    { required: true, message: "请输入买入周期", trigger: "blur" },
                ],
                buy_type: [
                    { required: true, message: "请输入买入类型", trigger: "blur" },
                ],
                closing_price: [
                    { required: true, message: "请输入平仓价", trigger: "blur" },
                ],
                fee: [
                    { required: true, message: "请输入手续费", trigger: "blur" },
                ],
                holding_profit_loss: [
                    { required: true, message: "请输入持仓盈亏", trigger: "blur" },
                ],
                holding_type: [
                    { required: true, message: "请输入持仓类型", trigger: "blur" },
                ],
                is_locked: [
                    { required: true, message: "请输入是否锁仓", trigger: "blur" },
                ],
                leverage: [
                    { required: true, message: "请输入杠杆倍数", trigger: "blur" },
                ],
                lock_up_period_days: [
                    { required: true, message: "请输入锁仓期（天）", trigger: "blur" },
                ],
                market_value: [
                    { required: true, message: "请输入市值", trigger: "blur" },
                ],
                order_number: [
                    { required: true, message: "请输入订单号", trigger: "blur" },
                ],
                order_status: [
                    { required: true, message: "请输入订单状态", trigger: "blur" },
                ],
                sell_amount: [
                    { required: true, message: "请输入卖出金额", trigger: "blur" },
                ],
                sell_time: [
                    { required: true, message: "请输入卖出时间", trigger: "blur" },
                ],
                sell_type: [
                    { required: true, message: "请输入卖出类型", trigger: "blur" },
                ],
                stock_id: [
                    { required: true, message: "请输入股票ID", trigger: "blur" },
                ],
                stock_name: [
                    { required: true, message: "请输入股票名称", trigger: "blur" },
                ],
                stop_loss_price: [
                    { required: true, message: "请输入止损价", trigger: "blur" },
                ],
                symbol: [
                    { required: true, message: "请输入股票代码", trigger: "blur" },
                ],
                target_profit_price: [
                    { required: true, message: "请输入目标盈利价", trigger: "blur" },
                ],
                transaction_principal: [
                    { required: true, message: "请输入交易本金", trigger: "blur" },
                ],
                user_id: [
                    { required: true, message: "请输入用户ID", trigger: "blur" },
                ],
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                ],




            },
            rulesAdd: {
                buy_direction: [
                    { required: true, message: "请输入买入方向", trigger: "blur" },
                ],
                buy_price: [
                    { required: true, message: "请输入买入价格", trigger: "blur" },
                ],
                buy_quantity: [
                    { required: true, message: "请输入买入数量", trigger: "blur" },
                ],
                buy_time: [
                    { required: true, message: "请输入买入时间", trigger: "blur" },
                ],
                buy_time_period: [
                    { required: true, message: "请输入买入周期", trigger: "blur" },
                ],
                buy_type: [
                    { required: true, message: "请输入买入类型", trigger: "blur" },
                ],
                closing_price: [
                    { required: true, message: "请输入平仓价", trigger: "blur" },
                ],
                fee: [
                    { required: true, message: "请输入手续费", trigger: "blur" },
                ],
                holding_profit_loss: [
                    { required: true, message: "请输入持仓盈亏", trigger: "blur" },
                ],
                holding_type: [
                    { required: true, message: "请输入持仓类型", trigger: "blur" },
                ],
                is_locked: [
                    { required: true, message: "请输入是否锁仓", trigger: "blur" },
                ],
                leverage: [
                    { required: true, message: "请输入杠杆倍数", trigger: "blur" },
                ],
                lock_up_period_days: [
                    { required: true, message: "请输入锁仓期（天）", trigger: "blur" },
                ],
                market_value: [
                    { required: true, message: "请输入市值", trigger: "blur" },
                ],
                order_number: [
                    { required: true, message: "请输入订单号", trigger: "blur" },
                ],
                order_status: [
                    { required: true, message: "请输入订单状态", trigger: "blur" },
                ],
                sell_amount: [
                    { required: true, message: "请输入卖出金额", trigger: "blur" },
                ],
                sell_time: [
                    { required: true, message: "请输入卖出时间", trigger: "blur" },
                ],
                sell_type: [
                    { required: true, message: "请输入卖出类型", trigger: "blur" },
                ],
                stock_id: [
                    { required: true, message: "请输入股票ID", trigger: "blur" },
                ],
                stock_name: [
                    { required: true, message: "请输入股票名称", trigger: "blur" },
                ],
                stop_loss_price: [
                    { required: true, message: "请输入止损价", trigger: "blur" },
                ],
                symbol: [
                    { required: true, message: "请输入股票代码", trigger: "blur" },
                ],
                target_profit_price: [
                    { required: true, message: "请输入目标盈利价", trigger: "blur" },
                ],
                transaction_principal: [
                    { required: true, message: "请输入交易本金", trigger: "blur" },
                ],
                user_id: [
                    { required: true, message: "请输入用户ID", trigger: "blur" },
                ],
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                ],

            },
        };
    },
    computed: {
        userRoleId() {
            const user = JSON.parse(localStorage.getItem("user"));
            return user ? user.role_id : null;
        },
        // 计算实际要显示的列
        visibleColumns() {
            return this.allColumns.filter(col =>
                this.selectedColumns.includes(col.prop)
            )
        }
    },
    watch: {
        // 当选择的列变化时，可以在这里添加额外逻辑
        selectedColumns(newVal) {
            console.log('当前显示的列：', newVal)
        },
    },
    mounted() {
        this.get_data();
    },

    methods: {
        setCheckedKeys(permissionIds) {
            console.log(permissionIds);
            if (!permissionIds) return;

            // 将字符串转换为数字数组
            const idsArray = permissionIds.split(',')
                .map(id => parseInt(id.trim()))
                .filter(id => !isNaN(id));

            if (idsArray.length > 0) {
                this.$refs.permissionTreeEdit.setCheckedKeys(idsArray);
            }
        },
        showform() {
            this.formshow = !this.formshow
        },
        get_time() {
            const now = new Date();
            const formatted = now.getFullYear() + '-' +
                String(now.getMonth() + 1).padStart(2, '0') + '-' +
                String(now.getDate()).padStart(2, '0') + ' ' +
                String(now.getHours()).padStart(2, '0') + ':' +
                String(now.getMinutes()).padStart(2, '0') + ':' +
                String(now.getSeconds()).padStart(2, '0');
            return formatted
        },
        // 新增打开
        addbtn() {
            this.dialogVisibleAdd = true;
            this.titles = "新增";
        },
        // 查询
        async get_data(btn) {
            if (btn) this.currentPage = 1
            this.table_loading = true; // 开始加载

            let params = new URLSearchParams();

            params.append('page', this.currentPage);
            params.append('page_size', this.pagesize);

            if (this.form.username) params.append('username', this.form.username);
            if (this.form.user_id) params.append('user_id', this.form.user_id);
            if (this.form.order_number) params.append('order_number', this.form.order_number);
            if (this.form.buy_time_start) params.append('buy_time_start', this.form.buy_time_start);
            if (this.form.buy_time_end) params.append('buy_time_end', this.form.buy_time_end);
            if (this.form.is_locked && this.form.is_locked !== 2) params.append('is_locked', this.form.is_locked);
            if (this.form.symbol) params.append('symbol', this.form.symbol);
            if (this.form.buy_time_period && this.form.buy_time_period !== 2) params.append('buy_time_period', this.form.buy_time_period);
            if (this.form.buy_direction && this.form.buy_direction !== 2) params.append('buy_direction', this.form.buy_direction);
            if (this.form.order_status && this.form.order_status !== 2) params.append('order_status', this.form.order_status);

            let data = `?${params.toString()}`;

            try {
                const res = await position_order_list(data);
                if (res.data && res.data.code == "200") {


                    this.tableData = res.data.data.data;
                    this.total = res.data.data.total_records;
                } else {
                    this.$message.error(res?.data?.msg || "获取数据失败");
                }
            } catch (err) {
                console.error("获取数据失败:", err);
                this.$message.error("请求出错，请稍后再试");
            } finally {
                this.table_loading = false; // 不论成功失败都结束 table_loading
            }
        },
        // 新增
        async add_data() {

            this.btnAdd = true;
            try {
                const valid = await this.$refs.formAdd.validate();
                if (!valid) {
                    this.$message.warning("表单验证未通过");
                    return;
                }

                const fields = [
                    'buy_direction',
                    'buy_price',
                    'buy_quantity',
                    'buy_time',
                    'buy_time_period',
                    'buy_type',
                    'closing_price',
                    'fee',
                    'holding_profit_loss',
                    'holding_type',
                    'is_locked',
                    'leverage',
                    'lock_up_period_days',
                    'market_value',
                    'order_number',
                    'order_status',
                    'sell_amount',
                    'sell_time',
                    'sell_type',
                    'stock_id',
                    'stock_name',
                    'stop_loss_price',
                    'symbol',
                    'target_profit_price',
                    'transaction_principal',
                    'user_id',
                    'username'
                ];

                this.formAdd.user_id = Number(this.formAdd.user_id)
                let data = {};

                for (const key of fields) {
                    const value = this.formAdd[key];
                    if (value !== '' && value !== null && value !== undefined) {
                        data[key] = value;
                    }
                }

                const res = await newly_added_position_orders(data);
                console.log(res, '新增');
                if (res && res.data?.code == "200") {
                    this.$message.success(res.data.message);

                    // this.$notify({
                    //     title: `${res.data.message}`,
                    //     message: `ID:${res.data.data.order_id}`,
                    //     type: 'success',
                    //     duration: 8000,
                    //     position: 'bottom-right'
                    // });
                    this.get_data();
                    this.dialogVisibleAdd = false;
                    console.log(111);
                } else {
                    this.$message.error(res?.data?.message || "操作失败");
                }
            } catch (err) {
                console.error(err);
                this.$message.error("请求失败，请稍后再试");
            } finally {
                this.btnAdd = false;
            }
        },
        // 更新
        async upd_data() {
            this.btnEdit = true;
            try {
                const valid = await this.$refs.formEdit.validate();
                if (!valid) {
                    this.$message.warning("表单验证未通过");
                    return;
                }

                const fields = [
                    'id',
                    'buy_direction',
                    'buy_price',
                    'buy_quantity',
                    'buy_time',
                    'buy_time_period',
                    'buy_type',
                    'closing_price',
                    'fee',
                    'holding_profit_loss',
                    'holding_type',
                    'is_locked',
                    'leverage',
                    'lock_up_period_days',
                    'market_value',
                    'order_number',
                    'order_status',
                    'sell_amount',
                    'sell_time',
                    'sell_type',
                    'stock_id',
                    'stock_name',
                    'stop_loss_price',
                    'symbol',
                    'target_profit_price',
                    'transaction_principal',
                    'user_id',
                    'username'
                ];



                const data = {};
                for (const key of fields) {
                    const value = this.formEdit[key];
                    if (value !== '' && value !== null && value !== undefined) {
                        data[key] = value;
                    }
                }

                const response = await position_order_editing(data);

                if (response.data && response.data.code == "200") {
                    this.$message.success(response.data.msg);
                    this.dialogVisibleEdit = false;
                    this.get_data();
                } else {
                    this.$message.warning(response?.data?.msg || "操作失败");
                }
            } catch (err) {
                console.error("更新失败:", err);
                this.$message.error("请求出错，请稍后再试");
            } finally {
                this.btnEdit = false;
            }
        },
        // 删除
        async del_data(id) {
            try {
                await this.$confirm("是否继续执行操作？", "提示", {
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    type: "warning",
                });

                const res = await position_order_deletion(id).catch((err) => {
                    return console.error(err);
                });

                if (res && res.status == "200" && res.data.code == "200") {
                    this.$message.success(res.data.msg);
                    this.dialogVisibleAdd = false;
                    this.get_data();
                } else {
                    this.$message.error(res.data.msg);
                }
            } catch (error) {
                // 用户点击取消或关闭对话框
                console.error(error);
            }
        },

        // 关闭弹窗
        beforeClose() {
            this.dialogVisibleEdit = false
            this.dialogVisibleAdd = false

            this.formAdd = {
                buy_direction: 'long',
                buy_price: '0',
                buy_quantity: 0,
                buy_time: '',
                buy_time_period: 'intraday',
                buy_type: 'market',
                closing_price: '',
                fee: '0',
                holding_profit_loss: '0',
                holding_type: 'otc',
                is_locked: 0,
                leverage: 1,
                lock_up_period_days: '',
                market_value: '0',
                order_number: '',
                order_status: 'holding',
                sell_amount: '0',
                sell_time: '',
                sell_type: '',
                stock_id: '',
                stock_name: '',
                stop_loss_price: '',
                symbol: '',
                target_profit_price: '',
                transaction_principal: '0',
                user_id: '',
                username: '',

            }
            this.formEdit = {
                id: '',
                buy_direction: 'long',
                buy_price: '0',
                buy_quantity: 0,
                buy_time: '',
                buy_time_period: 'intraday',
                buy_type: 'market',
                closing_price: '',
                fee: '0',
                holding_profit_loss: '0',
                holding_type: 'otc',
                is_locked: 0,
                leverage: 1,
                lock_up_period_days: '',
                market_value: '0',
                order_number: '',
                order_status: 'holding',
                sell_amount: '0',
                sell_time: '',
                sell_type: '',
                stock_id: '',
                stock_name: '',
                stop_loss_price: '',
                symbol: '',
                target_profit_price: '',
                transaction_principal: '0',
                user_id: '',
                username: '',

            }
        },

        // 分页
        current_change(currentPage) {
            this.currentPage = currentPage;
            this.get_data();
        },
        // 重置
        resetForm() {
            this.form = {
                username: "",
                user_id: "",
                order_number: "",
                buy_time_start: "",
                buy_time_end: "",
                is_locked: 2,
                symbol: "",
                buy_time_period: 2,
                buy_direction: 2,
                order_status: 2,
            };
            this.currentPage = 1;
            this.get_data();
        },
        // 编辑打开
        tableEditing(row) {
            this.titles = "编辑";
            this.dialogVisibleEdit = true;

            this.formEdit.id = row.id;

            this.formEdit.buy_direction = row.buy_direction || '';
            this.formEdit.buy_price = row.buy_price || '';
            this.formEdit.buy_quantity = row.buy_quantity || '';
            this.formEdit.buy_time = row.buy_time || '';
            this.formEdit.buy_time_period = row.buy_time_period || '';
            this.formEdit.buy_type = row.buy_type || '';
            this.formEdit.closing_price = row.closing_price || '';
            this.formEdit.fee = row.fee || '';
            this.formEdit.holding_profit_loss = row.holding_profit_loss || '';
            this.formEdit.holding_type = row.holding_type || '';
            this.formEdit.is_locked = row.is_locked || '';
            this.formEdit.leverage = row.leverage || '';
            this.formEdit.lock_up_period_days = row.lock_up_period_days || '';
            this.formEdit.market_value = row.market_value || '';
            this.formEdit.order_number = row.order_number || '';
            this.formEdit.order_status = row.order_status || '';
            this.formEdit.sell_amount = row.sell_amount || '';
            this.formEdit.sell_time = row.sell_time || '';
            this.formEdit.sell_type = row.sell_type || '';
            this.formEdit.stock_id = row.stock_id || '';
            this.formEdit.stock_name = row.stock_name || '';
            this.formEdit.stop_loss_price = row.stop_loss_price || '';
            this.formEdit.symbol = row.symbol || '';
            this.formEdit.target_profit_price = row.target_profit_price || '';
            this.formEdit.transaction_principal = row.transaction_principal || '';
            this.formEdit.user_id = row.user_id || '';
            this.formEdit.username = row.username || '';







        },
        exportTable(format) {
            switch (format) {
                case 'json':
                    this.exportJSON();
                    break;
                case 'xml':
                    this.exportXML();
                    break;
                case 'csv':
                    this.exportCSV();
                    break;
                case 'txt':
                    this.exportTXT();
                    break;
                case 'word':
                    this.exportWord();
                    break;
                case 'excel':
                    this.exportExcel();
                    break;
            }
        },
        exportJSON() {
            const jsonStr = JSON.stringify(this.tableData, null, 2);
            const blob = new Blob([jsonStr], { type: 'application/json' });
            this.downloadBlob(blob, 'table.json');
        },
        exportXML() {

            const xml = `<?xml version="1.0"?>\n<rows>\n` +
                this.tableData.map(item =>
                    `  <row>\n` +
                    `    <buy_direction>${item.buy_direction || ''}</buy_direction>\n` +
                    `    <buy_price>${item.buy_price || ''}</buy_price>\n` +
                    `    <buy_quantity>${item.buy_quantity || ''}</buy_quantity>\n` +
                    `    <buy_time>${item.buy_time || ''}</buy_time>\n` +
                    `    <buy_time_period>${item.buy_time_period || ''}</buy_time_period>\n` +
                    `    <buy_type>${item.buy_type || ''}</buy_type>\n` +
                    `    <closing_price>${item.closing_price || ''}</closing_price>\n` +
                    `    <fee>${item.fee || ''}</fee>\n` +
                    `    <holding_profit_loss>${item.holding_profit_loss || ''}</holding_profit_loss>\n` +
                    `    <holding_type>${item.holding_type || ''}</holding_type>\n` +
                    `    <is_locked>${item.is_locked || ''}</is_locked>\n` +
                    `    <leverage>${item.leverage || ''}</leverage>\n` +
                    `    <lock_up_period_days>${item.lock_up_period_days || ''}</lock_up_period_days>\n` +
                    `    <market_value>${item.market_value || ''}</market_value>\n` +
                    `    <order_number>${item.order_number || ''}</order_number>\n` +
                    `    <order_status>${item.order_status || ''}</order_status>\n` +
                    `    <sell_amount>${item.sell_amount || ''}</sell_amount>\n` +
                    `    <sell_time>${item.sell_time || ''}</sell_time>\n` +
                    `    <sell_type>${item.sell_type || ''}</sell_type>\n` +
                    `    <stock_id>${item.stock_id || ''}</stock_id>\n` +
                    `    <stock_name>${item.stock_name || ''}</stock_name>\n` +
                    `    <stop_loss_price>${item.stop_loss_price || ''}</stop_loss_price>\n` +
                    `    <symbol>${item.symbol || ''}</symbol>\n` +
                    `    <target_profit_price>${item.target_profit_price || ''}</target_profit_price>\n` +
                    `    <transaction_principal>${item.transaction_principal || ''}</transaction_principal>\n` +
                    `    <user_id>${item.user_id || ''}</user_id>\n` +
                    `    <username>${item.username || ''}</username>\n` +
                    `  </row>`).join('\n') +
                `\n</rows>`;
            const blob = new Blob([xml], { type: 'application/xml' });
            this.downloadBlob(blob, 'table.xml');
        },
        exportCSV() {
            const headers = [
                '买入方向', '买入价格', '买入数量', '买入时间', '买入周期', '买入类型', '平仓价', '手续费',
                '持仓盈亏', '持仓类型', '是否锁仓', '杠杆倍数', '锁仓期（天）', '市值', '订单号', '订单状态',
                '卖出金额', '卖出时间', '卖出类型', '股票ID', '股票名称', '止损价', '股票代码', '目标盈利价',
                '交易本金', '用户ID', '用户名'
            ];
            const fields = [
                'buy_direction', 'buy_price', 'buy_quantity', 'buy_time', 'buy_time_period', 'buy_type', 'closing_price', 'fee',
                'holding_profit_loss', 'holding_type', 'is_locked', 'leverage', 'lock_up_period_days', 'market_value', 'order_number', 'order_status',
                'sell_amount', 'sell_time', 'sell_type', 'stock_id', 'stock_name', 'stop_loss_price', 'symbol', 'target_profit_price',
                'transaction_principal', 'user_id', 'username'
            ];
            const content = [
                headers.join(','),
                ...this.tableData.map(item => fields.map(f => item[f] || '').join(','))
            ].join('\n');
            const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
            this.downloadBlob(blob, 'table.csv');
        },
        exportTXT() {
            const headers = [
                '买入方向', '买入价格', '买入数量', '买入时间', '买入周期', '买入类型', '平仓价', '手续费',
                '持仓盈亏', '持仓类型', '是否锁仓', '杠杆倍数', '锁仓期（天）', '市值', '订单号', '订单状态',
                '卖出金额', '卖出时间', '卖出类型', '股票ID', '股票名称', '止损价', '股票代码', '目标盈利价',
                '交易本金', '用户ID', '用户名'
            ];
            const fields = [
                'buy_direction', 'buy_price', 'buy_quantity', 'buy_time', 'buy_time_period', 'buy_type', 'closing_price', 'fee',
                'holding_profit_loss', 'holding_type', 'is_locked', 'leverage', 'lock_up_period_days', 'market_value', 'order_number', 'order_status',
                'sell_amount', 'sell_time', 'sell_type', 'stock_id', 'stock_name', 'stop_loss_price', 'symbol', 'target_profit_price',
                'transaction_principal', 'user_id', 'username'
            ];
            const content = [
                headers.join('\t'),
                ...this.tableData.map(item => fields.map(f => item[f] || '').join('\t'))
            ].join('\n');
            const blob = new Blob([content], { type: 'text/plain;charset=utf-8;' });
            this.downloadBlob(blob, 'table.txt');
        },
        async exportWord() {
            const { default: HTMLDocx } = await import('html-docx-js/dist/html-docx');
            const headers = [
                '买入方向', '买入价格', '买入数量', '买入时间', '买入周期', '买入类型', '平仓价', '手续费',
                '持仓盈亏', '持仓类型', '是否锁仓', '杠杆倍数', '锁仓期（天）', '市值', '订单号', '订单状态',
                '卖出金额', '卖出时间', '卖出类型', '股票ID', '股票名称', '止损价', '股票代码', '目标盈利价',
                '交易本金', '用户ID', '用户名'
            ];
            const fields = [
                'buy_direction', 'buy_price', 'buy_quantity', 'buy_time', 'buy_time_period', 'buy_type', 'closing_price', 'fee',
                'holding_profit_loss', 'holding_type', 'is_locked', 'leverage', 'lock_up_period_days', 'market_value', 'order_number', 'order_status',
                'sell_amount', 'sell_time', 'sell_type', 'stock_id', 'stock_name', 'stop_loss_price', 'symbol', 'target_profit_price',
                'transaction_principal', 'user_id', 'username'
            ];
            const html = `<table border="1" cellpadding="5" cellspacing="0"><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr>` +
                this.tableData.map(item =>
                    `<tr>${fields.map(f => `<td>${item[f] || ''}</td>`).join('')}</tr>`
                ).join('') + `</table>`;
            const blob = HTMLDocx.asBlob(html);
            this.downloadBlob(blob, 'table.docx');
        },
        async exportExcel() {
            const XLSX = await import('xlsx');
            const ws = XLSX.utils.json_to_sheet(this.tableData);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
            const blob = new Blob([wbout], { type: 'application/octet-stream' });
            this.downloadBlob(blob, 'table.xlsx');
        },
        downloadBlob(blob, filename) {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            link.click();
            URL.revokeObjectURL(link.href);
        }
    },
};
</script>
<style>
.rowlist {
    padding: 6px !important;
}

.nbysm {
    flex: 2;
    text-align: right;
    line-height: 40px;
    font-weight: 700;
    font-size: 15px;
}

.souSuoYouCe {
    margin: 20px 0 0 auto;
    padding-bottom: 5px;
    padding-right: 10px;
}

.cell {
    font-size: 13px;
    white-space: nowrap !important;
}

.demo-table-expand {
    font-size: 0;
    margin-left: 10px;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
<style lang="less" scoped>
.namename {
    padding: 0 10px;
    text-align: right;
    line-height: 40px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    min-width: 115px;
}

.el-textarea {
    overflow: hidden;
    /* 隐藏滚动条 */
}

.pageListBox {
    width: 100%;
    // padding: 10px;
    // background-color: aquamarine;
    height: auto;
    // border: 1px #000 solid;

    .cardAdmin {
        position: relative;
        // height: 18%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0;

        // border: #fafafa solid 1px;
        padding: 0 5px;
        margin-bottom: 2px;

        .formNewAdmin {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            align-self: baseline;
            padding-bottom: 10px;
            border-bottom: 1px #e3e3e3 solid;
        }

        .formSearch {
            width: 25%;
            min-width: 25%;
            margin-top: 20px;
            height: 30px;
            display: flex;
            justify-content: center;
        }
    }

    .btnBoxList {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;

        .formbtns {
            width: 50%;
            display: flex;
            justify-content: end;
            padding: 5px 10px;

            .qweqweasdasd {
                width: 75px;
                padding: 5px 10px;
                border: 1px #f4f4f4 solid;
            }

            .qweqweasdasd:hover {

                background-color: #e7e7e7;
                border: 1px #ccc solid;
            }

            

            .btnList22 {
                width: auto;
                height: 28px;
                color: #000;
                min-width: 50px;
                border-radius: 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                i {
                    font-size: 18px;
                }
            }

        }

        .btns {
            width: 50%;
            display: flex;
            padding: 5px 10px;



        }


    }

    .pop-up-form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        align-self: baseline;
        margin: 10px 0;
        justify-content: center;
        padding-right: 15px;

        .form-options {
            width: 100%;
            min-width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }
    }
}
</style>
<style>
.cell {
    font-size: 13px;
    white-space: nowrap !important;
}

textarea {
    resize: none !important;
}

/* 子级样式 */
.child-row11 {
    background-color: #fcfcfc !important;
    color: #ff8718;
}

/* 父级样式 */
.parent-row11 {
    background-color: #ffffff;
    color: #000;
    font-weight: 500;
}

.parent-row11 .cell {
    font-size: 13px !important;
}

.el-dropdown-link {
    height: 100%;
    cursor: pointer;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.fenye11 {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 4px 8px;
}



.el-pager li.active {
    background-color: #000 !important;
}

.setFomr {
    display: flex;
    align-items: center;
    padding: 10px 10px 0 10px;
}



.resetForm-button {
    background-color: #ffffff !important;
    border-color: #333 !important;
    color: #333 !important;
    font-size: 13px !important;
}

.resetForm-button:hover {
    background-color: #fff !important;
    border-color: #333 !important;
}
</style>
  